<template>
  <div class="f-menu">
       <el-menu
           default-active="2"
           class="border-0"
       >
           <template v-for="(item,index) in asideMenus" :key="index">
               <!-- 二级菜单 -->
               <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
                   <template #title>
                       <el-icon>
                           <component :is="item.icon"></component>
                       </el-icon>
                       <span>{{ item.name }}</span>
                   </template>
                   <!-- 子菜单 -->
                   <el-menu-item v-for="(item2,index2) in item.child" :key="index2" 
                   :index="item2.frontpath">
                       {{ item2.name }}
                   </el-menu-item>
               </el-sub-menu>
               <!-- 一级菜单 -->
               <el-menu-item v-else :index="item.frontpath">
                   <el-icon>
                       <component :is="item.icon"></component>
                   </el-icon>
                   <span>{{ item.name }}</span>
               </el-menu-item>
           </template>
       </el-menu>
  </div>
</template>
<script setup>
   const asideMenus = [
       {
           'name':'后台面板',
           'icon':'help',
           'child':[
               {
                   'name':'主控台',
                   'icon':'home-filled',
                   'path':'/'
               }
           ]
       },
       {
           'name':'商城管理',
           'icon':'shopping-bag',
           'child':[
               {
                   'name':'商品管理',
                   'icon':'shopping-cart-full',
                   'path':'/goods/list'
               }
           ]
       },
       {
           'name':'会员管理',
           'icon':'shopping-bag',
       }
   ]
</script>
<style>
   .f-menu {
       width: 250px;
       position: fixed;
       top:64px;
       bottom:0;
       left:0;
       overflow: auto;
   }
</style>